<template>
  <!--  @ok="handleSubmit"-->
  <div>
    <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="70%" :showOkBtn="false"
      :showCancelBtn="false">
      <!--    <BasicForm @register="registerForm"> </BasicForm>-->
      <!--    :label-col="labelCol"-->
      <!--    :wrapper-col="wrapperCol"-->
      <Form :model="formData" label-align="right" ref="formRef">
        <FormItem name="list" label="增加商品库存" :required="true">
          <SelectStorageList :orderNo="formData.orderNo" type="in" @success="productSpecSuccessFn" @close="closeModal"
            ref="selectStorage"></SelectStorageList>
        </FormItem>
      </Form>
    </BasicModal>

    <Modal v-model:visible="visible" title="提示信息" @ok="handleOk">
      <p v-for="(item, index) in msgList">第{{ item.index }}行 {{ item.message }}</p>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './role.data';
import { BasicModal, useModalInner } from '@/components/Modal';
import SelectStorageList from "@/views/store/components/SelectStorageList/index.vue"
import { BasicTree, TreeItem } from '@/components/Tree';
import { getNoApi } from '@/api/sys/wmProduct';
import { Modal, } from 'ant-design-vue';

import {
  Form,
  FormItem,
  Input,
  Divider
} from 'ant-design-vue';
import { columns, searchFormSchema } from './role.data';
import { useMessage } from '@/hooks/web/useMessage';
import { useRefs } from '@vben/hooks';
import util from "@/utils/util";
import { inStorageApi } from "@/api/sys/wmStorage";

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const treeData = ref<TreeItem[]>([]);
const { refs, setRefs } = useRefs();

const { createMessage } = useMessage();

const formSchemaList = ref(formSchema)
const formData = ref({});
const labelCol = ref({ span: 10 });
const wrapperCol = ref({ span: 13 });
const formRef = ref();

const loading = ref(false);

const selectStorage = ref();

const id = ref('');
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 90,
  baseColProps: { span: 24 },
  schemas: formSchema,
  showActionButtonGroup: false,
});

const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //打开弹层后的回调
  setModalProps({ confirmLoading: false });

  isUpdate.value = data?.isUpdate;
  formData.value = { orderNo: "", list: [] };
  id.value = '';
  if (unref(isUpdate)) {
    // console.log("---data.record:",data.record)
    id.value = data.record.id;

  } else {
    getNoApi({ type: "in_store" }).then((res) => {
      //console.log(res)
      if (res.code == 200) {
        formData.value.orderNo = res.data;
        // selectStorage.value.initFn();
      }
    });

  }
});

const getTitle = computed(() => "选择需要新增库存的商品sku,点击确定后将在原有库存的基础上增加库存。");

const msgList = ref([]);
const visible = ref(false);



function closeFn() {
  closeModal()
  emit("success");

}

function productSpecSuccessFn(list) {
  let ol = formData.value.list;
  formData.value.list = ol.push(...list);
  submitFn()
}

function submitFn() {
  formRef.value
    .validate()
    .then(() => {
      const values = unref(formData.value);
      inStorageApi(values).then(res => {
        loading.value = false;

        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            let msg = "";
            for (let i = 0; i < res.data.length; i++) {
              let row = res.data[i];
              msg += `第${row.index}行 ${row.message}\n`
            }
            msgList.value = res.data;
            visible.value = true;
          } else {
            createMessage.success('导入成功!');
            closeFn();
          }
        } else {
          loading.value = false;

          createMessage.error(res.message);
        }
      })
    })
}

function handleOk() {
  visible.value = false;
}


</script>

<style lang="less">
.m_w_100 {
  width: 90%;

  .ant-col-6 {
    flex: 0 0 10%;
    max-width: 10%;
  }
}

.ant-form {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>
